<!--
 * @Author: zhangyang
 * @Date: 2021-09-09 12:07:27
 * @LastEditTime: 2022-05-22 15:51:24
 * @Description: 重置密码 | 修改密码
-->
<script lang="ts" setup>
import { useToggle } from "@vant/use";
import { isMobile } from "../../util/valid";
import { useVerifyCode } from "../../hooks/useVerifyCode";
import type { FormInstance } from 'vant';
import { mod_passwd } from "../../api/user";
import { userInfo } from "../../store";
import { removeToken } from "../../util/auth";
const { countDown, isClicked, sendClick } = useVerifyCode();
const formRef = ref<FormInstance>();
const form = ref<Form_Reset_Passwd>({
  tel: '',
  code: '',
  passwd: '',
  passwd_again: ''
});
const validPasswd = () => {
  const { passwd: p1, passwd_again: p2 } = form.value;
  return p1 === p2;
};
const [showPass1, toggle1] = useToggle(false);
const [showPass2, toggle2] = useToggle(false);
const sure = async () => {
  try {
    await formRef.value?.validate();
    await mod_passwd(form.value);
    Toast('修改成功，请重新登录！');
    removeToken();
    location.href = '/base/login';
  } catch (error) {
    return;
  }
};

interface Props {
  title?: string;
  show_back?: string;
};
const props = withDefaults(defineProps<Props>(), { title: '重置密码' });
if (!!props.show_back) {
  form.value.tel = userInfo.value.tel;
}
</script>
<template>
  <van-nav-bar
    :title="props.title"
    :left-arrow="!!props.show_back"
    safe-area-inset-bottom
    @click-left="$router.back()"
  />
  <div v-bind="$attrs" class="w-full h-full mt-10">
    <van-form ref="formRef">
      <van-cell-group inset>
        <van-field
          v-model.trim="form.tel"
          placeholder="手机号"
          :disabled="!!props.show_back"
          :rules="[
            { required: true, message: '请填写手机号' },
            { validator: isMobile, message: '请输入合法的手机号' }
          ]"
        />
        <van-field
          v-model.trim="form.code"
          placeholder="验证码"
          :rules="[{ required: true, message: '请填写验证码' }]"
        >
          <template #button>
            <van-button
              v-if="!isClicked"
              size="small"
              type="primary"
              plain
              @click="sendClick"
            >发送验证码</van-button>
            <van-button
              v-else
              size="small"
              :disabled="true"
            >
              {{ countDown.current.value.seconds }}秒后重发
            </van-button>
          </template>
        </van-field>
        <van-field
          v-model.trim="form.passwd"
          placeholder="输入新密码"
          :type="showPass1 ? 'text' : 'password'"
          clearable
          :rules="[{ required: true, message: '请填写新密码' }]"
        >
          <template #right-icon>
            <van-icon :name="showPass1 ? 'eye' : 'closed-eye'" @click="toggle1(!showPass1)" />
          </template>
        </van-field>
        <van-field
          v-model.trim="form.passwd_again"
          placeholder="再次确认新密码"
          :type="showPass2 ? 'text' : 'password'"
          :rules="[
            { required: true, message: '请确认新密码' },
            { validator: validPasswd, message: '两次输入的密码不一致' }
          ]"
        >
          <template #right-icon>
            <van-icon :name="showPass2 ? 'eye' : 'closed-eye'" @click="toggle2(!showPass2)" />
          </template>
        </van-field>
      </van-cell-group>
      <div class="m-4">
        <van-button block type="primary" @click="sure">
          确定
        </van-button>
      </div>
    </van-form>
  </div>
</template>
